import Vue from "vue"
import MessageBox from "./MessageBox"
import MessageTip from "./MessageTip"

export const messageTip = (function() {
    let tipArr = []
    let tipLen = 0
    return function(options) {
        let tId = null;
        let defaults = {
            content: "",
			handleClose: null,
        };

        const Components = Vue.extend(MessageTip)

        for (const key in options) {
            defaults[key] = options[key]
        }

        const myVm = new Components({
            el: document.createElement("div"),
            data() {
                return {
                    content: defaults.content,
                }
            },
            methods: {
                handleClose() {
                    defaults.handleClose && defaults.handleClose.call(this)
                    myVm.$el.style.top = `-100px`
                    myVm.$el.style.transition = `0.32s`
                    if(tId) {
                        clearTimeout(tId)
                    }
                    setTimeout(() => {
                        let index = tipArr.indexOf(myVm.$el)
                        tipArr.splice(index, 1)
                        Array.from(tipArr).forEach((item, i) => {
                            if(i >= index) {
                                item.style.top = item.offsetTop - 50 + "px"
                            }
                        })
                        document.body.removeChild(myVm.$el)
                    }, 60)
                },
            }
        })
        document.body.appendChild(myVm.$el)
        tipArr =  [...document.querySelectorAll("#tip-info")]
        tipLen = tipArr.length
        if(tipLen > 4) {
            tId = setTimeout(() => {
                myVm.handleClose()
            }, 0)
        } else {
            tId = setTimeout(() => {
                myVm.handleClose()
            }, 4000)
        }
        Array.from(tipArr).forEach((item, index, arr) => {
            let pre = arr[index-1]
            let current = (pre?.offsetTop ? pre.offsetTop : 0) + 50
            item.style.top = current + "px"
            item.dataset.key = Math.random().toString().substr(2, 5)
        })
        
    }
})();

export const messageBox = (function() {
    // 默认配置
    return function(options) {
        let defaults = {
            title: "标题",
            content: "",
            cancel: "",
			ok: "",
			handleCancel: null,
			handleOk: null
        };

        const Components = Vue.extend(MessageBox)

        for (const key in options) {
            defaults[key] = options[key]
        }

        const myVm = new Components({
            el: document.createElement("div"),
            data() {
                return {
                    title: defaults.title,
                    content: defaults.content,
                    cancel: defaults.cancel,
                    ok: defaults.ok,
                }
            },
            methods: {
                handleCancel() {
                    defaults.handleCancel && defaults.handleCancel.call(this)
                    document.body.removeChild(myVm.$el)
                },
                handleOk() {
                    defaults.handleOk && defaults.handleOk.call(this)
                    document.body.removeChild(myVm.$el)
                }
            }
        })
        document.body.appendChild(myVm.$el)
    }
})();
